<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="应用名称" align="center" prop="applyName" />
      <el-table-column label="授权状态" align="center" prop="applyStatus" :formatter="formatStatus" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-document" @click="handleOpenDetails(scope.row)" v-hasPermi="['control:appAuth:details']">详情</el-button>
          <el-button v-if="scope.row.applyStatus==='1'" style="width: 80px" type="text" @click="handleStatusChange(scope.row)" v-hasPermi="['control:appAuth:status']">授权</el-button>
          <el-button v-else type="text" style="color: rgb(245, 108, 108); width: 80px" @click="handleStatusChange(scope.row)" v-hasPermi="['control:appAuth:status']">
            取消授权
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <details-table ref="details" :currentRow="currentRow" />
  </div>
</template>

<script>
import { listAppInfo, changeAppStatus } from './service';
import DetailsTable from './detailsTable';

export default {
  name: 'AppAuth',
  components: { DetailsTable },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中行id
      currentRow: {},
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    formatStatus(row, column, cellValue, index) {
      return cellValue === '2' ? '已授权' : '否';
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listAppInfo(this.queryParams)
        .then((response) => {
          this.tableList = response.rows;
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.applyStatus === '1' ? '授权' : '取消授权';
      this.$confirm('确定执行' + text + '操作吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return changeAppStatus(row.id, row.applyStatus === '1' ? '2' : '1');
        })
        .then(() => {
          this.msgSuccess(text + '成功');
          this.getList();
        })
        .catch(function () {});
    },
    /** 查看详情操作 */
    handleOpenDetails(row) {
      this.currentRow = row;
      this.$nextTick(function () {
        this.$refs.details.show();
      });
    },
  },
};
</script>
